<template>
  账号：<input type="text" placeholder="请输入账号" v-model="username">
  <br>
  密码：<input type="password" placeholder="请输入密码" v-model="password">
  <br>
  <div v-if="isLogin">欢迎你，{{ username }}</div>
  <button @click="login" v-else>登录</button>
</template>

<script setup>
    import { ref } from 'vue';
    const username = ref('')
    const password = ref('')
    const isLogin = ref(false); // 控制是否登录了
    const login = () => {
        if(username.value ==='admin' && password.value === 'root') {
            // 登录成功
            isLogin.value = true;
        } else {
            // 登录失败
            alert('账号或密码错误')
        }
    }
</script>